<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="smartproducttestalldataList" >
      <el-table-column label="${comment}" align="center" prop="id" />
      <el-table-column label="产品id" align="center" prop="productId" />
      <el-table-column label="产品编码" align="center" prop="productCode" />
      <el-table-column label="测试结果" align="center" prop="testResult" />
      <el-table-column label="测试时长" align="center" prop="testTime" />
      <el-table-column label="电流" align="center" prop="current" />
      <el-table-column label="电压" align="center" prop="voltage" />
      <el-table-column label="设定温度" align="center" prop="temperature" />
      <el-table-column label="震动时间" align="center" prop="shakeTime" />
      <el-table-column label="震动频率" align="center" prop="shakeFrequency" />
      <el-table-column label="震动幅值" align="center" prop="shakeSize" />
      <el-table-column label="设备id" align="center" prop="deviceId" />
      <el-table-column label="创建时间" align="center" prop="createDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据名称" align="center" prop="state" />
      <el-table-column label="测试人" align="center" prop="testUesr" />
      <el-table-column label="产品型号id" align="center" prop="productModelId" />
      <el-table-column label="计划任务id" align="center" prop="taskPalnId" />
      <el-table-column label="组织机构id" align="center" prop="organizeorganazId" />
      <el-table-column label="波形数据" align="center" prop="waveData" >
        <template slot-scope="{ row }">
                  <span v-if="row.waveData && row.waveData.length > 10">
                    <el-popover placement="top-start" title="waveData" width="80px" trigger="hover">
                     <div>{{ row.waveData }}</div>
                       <span slot="reference">
                          {{ row.waveData.substr(0, 10) + '...' }}
                       </span>
                   </el-popover>
                  </span>
          <span v-else>{{ row.modStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="viewChart(scope.row)"
          >查看曲线图</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getlistSmartproducttestalldata"
    />

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-row>
        <el-col :span="24" class="card-box">
          <div style="width: 50%; float: left">
            <el-card>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <div ref="currentWaveform" style="height: 210px" />
              </div>
            </el-card>
            <el-card>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <div ref="voltageWaveform" style="height: 210px" />
              </div>
            </el-card>
          </div>
          <div style="width: 50%; float:right;">
            <el-descriptions class="margin-top" :column="1"  border>
              <el-descriptions-item label="开关ID：">{{smartproducttestalldata.deviceId}}</el-descriptions-item>
              <el-descriptions-item label="操作员：">{{smartproducttestalldata.testUesr}}</el-descriptions-item>
              <el-descriptions-item label="通讯电压V：">{{smartproducttestalldata.voltage}}</el-descriptions-item>
              <el-descriptions-item label="通讯电缆mA:">{{smartproducttestalldata.current}}</el-descriptions-item>
              <el-descriptions-item label="发火电压V:">{{smartproducttestalldata.voltage}}</el-descriptions-item>
              <el-descriptions-item label="发火电流mA:">{{smartproducttestalldata.current}}</el-descriptions-item>
              <el-descriptions-item label="结果">{{smartproducttestalldata.testResult}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
  import echarts from "echarts";
  import { listSmartproducttestalldata} from "@/api/smart/smartproducttestalldata";
  export default {
    name: "CheckData",
    data() {
      return {
        loading: false,
        // 电流波形
        currentWaveform: null,
        // 电压波形
        voltageWaveform: null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productId: null,
        },
        // 总条数
        total: 0,
        // 产品测试数据集表格数据
        smartproducttestalldataList: [],
        open: false,
        waveDatas: null,
        smartproducttestalldata: {
          productId: null,
          productCode: null,
          testResult: null,
          testTime: null,
          current: null,
          voltage: null,
          temperature: null,
          shakeTime: null,
          shakeFrequency: null,
          shakeSize: null,
          deviceId: null,
          createDate: null,
          state: null,
          testUesr: null,
          productModelId: null,
          taskPalnId: null,
          organizeorganazId: null,
          waveData: null
        }
      };
    },
    created() {
      this.queryParams.productId = this.$route.query.id * 1;
      this.getlistSmartproducttestalldata();
    },
    methods: {

      /** 查询产品测试数据集列表 */
      getlistSmartproducttestalldata() {
        this.loading = true;
        listSmartproducttestalldata(this.queryParams).then(response => {
          this.smartproducttestalldataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 修改按钮操作 */
      viewChart(row) {
        this.open = true;
        this.smartproducttestalldata = row;
        var xdata = [];
        var cdata = [];
        var vdata = [];
        this.waveDatas = JSON.parse(this.smartproducttestalldata.waveData);
        // console.log(this.smartproducttestalldata.deviceId+ "----------------------")
        for (let rt = 0; rt < this.waveDatas.length; rt++) {
          xdata.push(this.waveDatas[rt]['time']);
          cdata.push(this.waveDatas[rt]['current']);
          vdata.push(this.waveDatas[rt]['voltage']);
        }
        this.$nextTick(() => {
          this.currentWaveform = echarts.init(this.$refs.currentWaveform, "macarons");
          this.currentWaveform.setOption({
            xAxis: {
              type: 'category',
              data: xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: cdata,
                type: 'line',
                smooth: true
              }
            ],
            title: [
              {
                left: 'center',
                text: '电流图'
              }
            ],
          });
          this.voltageWaveform = echarts.init(this.$refs.voltageWaveform, "macarons");
          this.voltageWaveform.setOption({
            xAxis: {
              type: 'category',
              data: xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: vdata,
                type: 'line',
                smooth: true
              }
            ],
            title: [
              {
                left: 'center',
                text: '电压图'
              }
            ],
          });
        });
      }
    },
  };
</script>
